<template>
	<jk-table border :data="upkeepItemList || []" :show-header="false">
		<vxe-column title="序号" align="center" field="sortNum" :width="50">
			<template slot-scope="scope">
				<span>{{ scope.row.sortNum }}</span>
			</template>
		</vxe-column>
		<vxe-column title="项目名称" align="left" field="upkeepItemName" :width="110" />
		<vxe-column title="状态" align="center" field="operation" :width="90">
			<template slot-scope="scope">
				<div class="flex-center">
					<jk-state-bar
						:state="scope.row.upkeepState"
						:state-list="upkeepStateList"
					></jk-state-bar>
				</div>
			</template>
		</vxe-column>
		<vxe-column title="计划保养时间" align="left" field="planUpkeepTime" :width="150" />
		<vxe-column title="保养情况" align="left" field="remarks" :width="150" />
		<vxe-column title="保养实际开始时间" align="left" field="realUpkeepStartTime" :width="150" />
		<!--<vxe-column title="上次保养时间" align="left" field="lastUpkeepTime" :width="150" />-->
		<vxe-column title="保养人员" align="left" field="belongDate" :min-width="120">
			<template slot-scope="scope">
				<div class="flex-start-center-wrap">
					<el-tag
						v-for="(empItem, empIndex) in scope.row.empList"
						:key="empIndex"
						style="width: calc(100% / 3);"
						:type="empItem.auditState === 1 ? 'success' : 'primary'"
						class="flex-between-center"
					>
						<div>
							<span class="el-icon-s-custom item-gap"></span>
							<span>{{ empItem.empName }}</span>
						</div>
					</el-tag>
				</div>
			</template>
		</vxe-column>
		<vxe-column title="操作" align="center" field="operation" :width="110">
			<template slot-scope="scope">
				<div class="flex-center">
					<el-popconfirm
						v-if="scope.row.upkeepState !== 3"
						title="确定操作吗？"
						@confirm="onUpdateStateBtn([scope.row.id])"
					>
						<jk-button
							v-if="scope.row.upkeepState !== 3"
							slot="reference"
							:has-permission="getPermission(['machinemanager:upkeepDispatchPlan:update'])"
							size="mini"
							type="primary"
							icon="el-icon-check"
						>单项完成</jk-button>
					</el-popconfirm>
					<el-popconfirm
						v-else
						title="确定操作吗？"
						@confirm="onClearFinishBtn([scope.row.id])"
					>
						<jk-button
							v-if="scope.row.upkeepState === 3"
							slot="reference"
							:has-permission="getPermission(['machinemanager:upkeepDispatchPlan:update'])"
							size="mini"
							type="warning"
							icon="el-icon-circle-close"
						>批量撤销</jk-button>
					</el-popconfirm>
				</div>
			</template>
		</vxe-column>
	</jk-table>
</template>
<script>
    import { upkeepStateList } from '../../../../../../utils/jk/status-option-list';
    import permissionMixin from '../../../../../../mixins/permission-mixin';

    export default {
        mixins: [permissionMixin],
        props: {
            row: {
                type: Object,
                default() {
                    return {};
                }
            },
            upkeepItemList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                upkeepStateList: upkeepStateList
            };
        },
        methods: {
            onClearBtn(ids) {
                this.$emit('on-clear', ids);
            },
            onUpdateStateBtn(ids) {
                this.$emit('on-finish', ids);
            },
            onClearFinishBtn(ids) {
                this.$emit('on-clear-finish', ids);
            }
        }
    };
</script>
